<template>
  <el-dialog :visible.sync="dialogVisible" :title="'结算账号管理('+supdata.name+')'"  width="950px" :close-on-click-modal="false">
    <div style="margin-bottom: 10px;">
      <el-button type="primary" @click="handleAdd">新增结算账号</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="cktitle" label="结算抬头">
        <template v-slot="scope">
          <el-input v-model="scope.row.cktitle"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="bankname" label="开户行">
        <template v-slot="scope">
          <el-input v-model="scope.row.bankname"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="bankid" label="账号">
        <template v-slot="scope">
          <el-input v-model="scope.row.bankid"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="bankaddress" label="开户地址">
        <template v-slot="scope">
          <el-input v-model="scope.row.bankaddress"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button-group>
            <el-button icon="el-icon-circle-check" type="success" @click="handleSave(scope.$index,scope.row)"></el-button>
            <el-button icon="el-icon-delete" type="danger" @click="handleDelete(scope.$index,scope.row)"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="medium">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        index: -1,
        supdata: {},
        newuser: {
          cktitle: '',
          bankid: '',
          bankname: '',
          address: ''
        }
      }
    },
    methods: {
      initData: function(index, data) {
        this.index = index;
        this.supdata = data;
        this.loadCheckout();
      },
      loadCheckout: function() {
        let params = {
          supid: this.supdata.id
        }

        this.axios.post("api/admin/suppliercheckout/list", params).then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.tableData = res.data.list;
          }
        })
      },
      handleAdd: function() {
        if(this.tableData.length==0){
          this.tableData.push({
            id: -1,
            username: '',
            password: '',
            mobile: '',
            email: ''
          });
        }else{
          if ( this.tableData[this.tableData.length - 1].id == -1 ) {
            this.$alert("存在未填写的账号信息!");
            return;
          }else{
			  this.tableData.push({
			    id: -1,
			    username: '',
			    password: '',
			    mobile: '',
			    email: ''
			  });
		  }
        }
      },
      handleSave: function(index, row) {
		  if(row.id==-1){
			  if(row.cktitle==""){
				  this.$message({
				    message: "请完善账号信息后在保存!",
				    showClose: true,
				    type: 'error',
				    duration: 1500
				  });
				 return;
			  }
		  }
        if(row.id==-1){
          let params={
             supid:this.supdata.id,
             supname:this.supdata.name,
             cktitle:row.cktitle,
             bankid:row.bankid,
             bankname:row.bankname,
             bankaddress:row.bankaddress,
           }
          this.axios.post("api/admin/suppliercheckout/create",params).then(res=>{
           if(res.status==200 && res.data.code==0){
             this.$message({
               message: "信息保存成功!",
               showClose: true,
               type: 'success',
               duration: 1500
             });
             this.dialogVisible=false;
           }else{
             this.$message({
               message: "失败保存失败!",
               showClose: true,
               type: 'error',
               duration: 1500
             });
           }
          })
        }else{
          let params={
             id:row.id,
             supname:row.supname,
             supid:row.supid,
             cktitle:row.cktitle,
             bankid:row.bankid,
             bankname:row.bankname,
             bankaddress:row.bankaddress,
           }
          this.axios.post("api/admin/suppliercheckout/update",params).then(res=>{
              if(res.status==200 && res.data.code==0){
                this.$message({
                  message: "信息更新保存成功!",
                  showClose: true,
                  type: 'success',
                  duration: 1500
                });
                this.dialogVisible=false;
              }else{
                this.$message({
                  message: "失败保存失败!",
                  showClose: true,
                  type: 'error',
                  duration: 1500
                });
              }
          })
        }
      },
      handleDelete: function(index, row) {

		  if(row.id==-1){
 			 this.tableData.splice(index,1);
			 return;
		  }
          let confirmText=["正在删除此账户吗？请仔细核信息:"," ","结算抬头: "+row.cktitle,"结算账号:"+row.bankid];
          const newDatas=[];
          const h=this.$createElement;
          for(const i in confirmText){
            newDatas.push(h('p',null,confirmText[i]));
          }

          this.$confirm("提示",{
            message:h('div',null,newDatas),
            confirmButtonText: "删除",
            cancelButtonText: "取消",
            type: 'error'
          }).then(() => {
             this.axios.post("api/admin/suppliercheckout/delete",{id:row.id}).then(res=>{
              if (res.status == 200 && res.data.code == 0) {
                this.$message.success(res.data.msg, "提示");
                this.tableData.splice(index, 1);
              } else {
                this.$alert(res.data.msg, "提示", {
                  type: "error"
                });
              }
            })
          }).catch(() => {})

      }

    }
  }
</script>

<style>
</style>
